<script setup lang="ts">
import { computed, reactive } from 'vue';
import JsonTree from './JsonTree.vue';

const props = defineProps<{
    ckey: any;
    cdata: any;
    cval: any;
}>();

const targetStyle: any = reactive({});
targetStyle.publishlist = true;

if (
    props?.ckey === 'publishlist' &&
    props?.cdata &&
    props?.cdata[props?.ckey]
) {
    Object.keys(props?.cdata[props?.ckey]).forEach((el: any) => {
        targetStyle[el] = true;
    });
}

const paramType: any = computed(() => {
    let tmpType: string = typeof props.cdata[props.ckey];
    if (tmpType === 'object') {
        if (props.cdata[props.ckey] && props.cdata[props.ckey]['@path']) {
            return 'path';
        } else if (!props.cdata[props.ckey]) {
            return 'null';
        } else if (Array.isArray(props.cdata[props.ckey])) {
            return 'array';
        }
    }
    return tmpType;
});

function targetClick(key: any) {
    targetStyle[key] = !targetStyle[key];
}

function setVal() {
    if (props?.cdata[props.ckey]['@path'] && props?.cval?.apikeys) {
        const tmpIndex: number = props.cval.apikeys.findIndex(
            (el: any) => el === props.cdata[props.ckey]['@path']
        );
        if (tmpIndex > -1) {
            props.cval.apikeys.splice(tmpIndex, 1);
        } else {
            props.cval.apikeys.push(props.cdata[props.ckey]['@path']);
        }
    }
    props.cval.setapikeys(props.cval.apikeys);
}
</script>

<template>
    <div class="as-ed-dir" v-if="paramType === 'object'">
        <template v-if="ckey !== 'publishlist'">
            <div
                class="as-ed-mg"
                @pointerdown="targetClick(ckey)"
                v-if="!targetStyle[ckey]"
            >
                + {{ ckey }}
            </div>
            <div class="as-ed-mg" @pointerdown="targetClick(ckey)" v-else>
                - {{ ckey }}
            </div>
            <div class="as-ed-for" v-if="targetStyle[ckey]">
                <div
                    class="as-ed-for-item"
                    v-for="item in Object.keys(cdata[ckey])"
                    :key="item"
                >
                    <div class="as-ed-item">
                        <JsonTree
                            :cval="cval"
                            :ckey="item"
                            :cdata="cdata[ckey]"
                        ></JsonTree>
                    </div>
                </div>
            </div>
        </template>

        <template v-else>
            <div
                class="as-ed-for-item"
                v-for="item in Object.keys(cdata[ckey])"
                :key="item"
            >
                <JsonTree
                    :cval="cval"
                    :ckey="item"
                    :cdata="cdata[ckey]"
                ></JsonTree>
            </div>
        </template>
    </div>

    <div class="as-ed-dir" v-else-if="paramType === 'array'">
        <div class="as-ed-mg" @pointerdown="targetClick">+ {{ ckey }}</div>
        <div class="as-ed-for">
            <div
                class="as-ed-for-item"
                v-for="(item, index) in cdata[ckey]"
                :key="index"
            >
                <div class="as-ed-index">
                    <JsonTree
                        :cval="cval"
                        :ckey="index"
                        :cdata="cdata[ckey]"
                    ></JsonTree>
                </div>
            </div>
        </div>
    </div>
    <div
        v-else-if="paramType === 'path'"
        :class="
            props.cval.apikeys.includes(props.cdata[props.ckey]['@path'])
                ? 'as-ed-path-cur'
                : 'as-ed-path'
        "
        @pointerdown="setVal()"
    >
        {{ ckey }}
    </div>

    <span v-else class="as-ed-span">{{ ckey }}</span>
</template>

<style scoped lang="scss">
.as-ed-span,
.as-ed-dir,
.as-ed-li {
    position: relative;
    padding: 0 0 0 20px;
    height: auto;
}
.as-ed-dir {
    padding: 0 0 0 10px;
}
.as-ed-span {
    padding: 0 0 0 32px;
}

.as-ed-for-item {
    height: auto;
    position: relative;
    border-left: 1px solid var(--bcolora);
    padding-left: 3px;
    color: var(--fcolora);
    &:hover {
        border-left: 1px solid var(--dcolor);
    }
}
.as-ed-item {
    height: auto;
    display: inline-block;
    width: 128px;
    word-break: break-all;
    text-align: left;
    // &::after {
    //     content: ':';
    // }
}
.as-ed-path-cur,
.as-ed-path {
    cursor: pointer;
    display: inline-block;
    width: auto;
    word-break: break-all;
    text-align: left;
    height: auto;
    padding: 0 8px;
    margin: 0 3px;
    // border: 1px solid var(--dcolor);
    // background-color: aqua;
    &::before {
        margin-right: 6px;
        font-size: var(--fsizex);
    }
}
.as-ed-path {
    &::before {
        font-weight: bold;
        content: '□';
    }
}
.as-ed-path-cur {
    font-weight: bold;
    &::before {
        content: '☑';
    }
}
.as-ed-mg {
    // position: absolute;
    // top: -20px;
    // left: -5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: -16px;
    // font-size: 18px;
    padding: 0;
    cursor: pointer;
    // border-radius: 50%;
    // border: 1px solid var(--dcolor);
    color: var(--fcolora);
}
.as-ed-index {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--fcolora);
    top: 5px;
    left: -5px;
    display: block;
    width: auto;
    &::after {
        content: '.';
    }
}
</style>
